<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang">
      <a href="javascript:void(0)">
        {{ title }}
        <Icon :size="18" type="md-arrow-dropdown" />
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: "Language",
  props: {
    lang: String
  },
  data() {
    return {
      langList: {
        "zh-CN": "语言",
        "zh-TW": "語言",
        "en-US": "Lang"
      },
      localList: {
        "zh-CN": "中文简体",
        "zh-TW": "中文繁体",
        "en-US": "English"
      }
    };
  },
  watch: {
    lang(lang) {
      this.$i18n.locale = lang;
    }
  },
  computed: {
    title() {
      return this.langList[this.lang];
    }
  },
  methods: {
    selectLang(name) {
      this.$emit("on-lang-change", name);
    }
  }
};
</script>
